<nav class="mat-elevation-z6 navBarBox invert" *ngIf="userLogin">
  <div fxLayout="row">
    <!-- mobile -->
    <div
      fxFlex
      fxLayout="row"
      fxLayoutAlign="center center"
      fxShow.xs="true"
      fxHide="true"
    >
      <a
        routerLink="/dashborad"
        [title]="source.logoName | translate"
        class="logo"
      >
        {{ source.logoName | translate }}
      </a>
      <a
        href="javascript:void(0)"
        [title]="'菜单' | translate"
        class="white-text menu"
        (click)="slideNavHandel()"
        style="position: absolute;left: 14px;top: 4px;"
      >
        <mat-icon
          fontIcon="fa-bars"
          class="animated swing fontSize-24"
        ></mat-icon>
      </a>
    </div>
    <!-- pc -->
    <div fxFlex fxLayout="row" class="page-box" fxHide.xs="true">
      <a
        routerLink="/dashborad"
        [title]="source.logoName | translate"
        class="logo"
      >
        {{ source.logoName | translate }}
      </a>

      <!-- nav content -->
      <div fxFlex fxLayout="row" fxLayoutAlign="start center" id="navContent">
        <a routerLink="/dashborad" routerLinkActive="active">
          <mat-icon fontIcon="fa-signal" class="animated swing"></mat-icon>
          <span>行业分析</span>
        </a>
        <a routerLink="/word" routerLinkActive="active">
          <mat-icon fontIcon="fa-tags" class="animated swing"></mat-icon>
          <span>最鲜商机</span>
        </a>
        <a routerLink="/monitorBrand" routerLinkActive="active">
          <mat-icon fontIcon="fa-flag" class="animated swing"></mat-icon>
          <span>品牌数据</span>
        </a>
        <a routerLink="/monitorShop" routerLinkActive="active">
          <mat-icon fontIcon="fa-home" class="animated swing"></mat-icon>
          <span>店铺数据</span>
        </a>
        <a routerLink="/monitorProduct" routerLinkActive="active">
          <mat-icon
            fontIcon="fa-shopping-bag"
            class="animated swing"
          ></mat-icon>
          <span>商品数据</span>
        </a>
      </div>
    </div>

    <!-- setting -->
    <div
      fxFlex
      fxLayoutAlign="end center"
      fxLayout="row"
      fxHide.xs="true"
      class="navBarBox-icon"
      *ngIf="userLogin"
    >
      <a
        href="javascript:;"
        fxLayout="row"
        fxLayoutAlign="start center"
        [matTooltip]="user.activeVersionInfo.deadLine | date: 'yyyy-MM-dd'"
        [title]="user.activeVersionInfo.deadLine | date: 'yyyy-MM-dd'"
      >
        <span>{{ '到期' | translate }}&nbsp;</span>
        <a href="javascript:;" class="progress">
          <div class="determinate" [ngStyle]="datetime"></div>
        </a>
      </a>
      <a
        routerLink="/setting"
        routerLinkActive="active"
        [matTooltip]="'设置' | translate"
      >
        <mat-icon
          fontIcon="fa-cog"
          class="animated swing fontSize-24"
        ></mat-icon>
      </a>
      <a
        href="javascript:;"
        [matTooltip]="'购买' | translate"
        (click)="shopping()"
        *ngIf="user.channel == '1'"
      >
        <mat-icon
          fontIcon="fa-shopping-cart"
          class="animated swing fontSize-24"
        ></mat-icon>
      </a>
      <a
        (click)="logOut()"
        [matTooltip]="'退出' | translate"
        href="javascript:;"
      >
        <mat-icon
          fontIcon="fa-power-off"
          class="animated swing fontSize-24"
        ></mat-icon>
      </a>
      <!-- <translate-menu class="translate-menu-panel"></translate-menu> -->
    </div>
  </div>
</nav>

<!-- 侧边栏slide -->
<mat-sidenav-container
  fxShow.xs="true"
  fxHide="true"
  class="slide-nav-box"
  [ngClass]="{ 'mat-sidenav-opened': slideNav.opened }"
>
  <mat-sidenav
    [mode]="slideNav.mode"
    [opened]="slideNav.opened"
    fxLayout="column"
    fxFlexFill
    class="slide-nav-inner"
  >
    <!-- sidenav content -->
    <a mat-button routerLink="/dashborad" routerLinkActive="active">
      <mat-icon fontIcon="fa-signal" class="animated swing"></mat-icon>
      <span>行业分析</span>
    </a>
    <a mat-button routerLink="/word" routerLinkActive="active">
      <mat-icon fontIcon="fa-tags" class="animated swing"></mat-icon>
      <span>最鲜商机</span>
    </a>
    <a routerLink="/monitorBrand" routerLinkActive="active">
      <mat-icon fontIcon="fa-flag" class="animated swing"></mat-icon>
      <span>品牌数据</span>
    </a>
    <a mat-button routerLink="/monitorShop" routerLinkActive="active">
      <mat-icon fontIcon="fa-home" class="animated swing"></mat-icon>
      <span>店铺数据</span>
    </a>
    <a mat-button routerLink="/monitorProduct" routerLinkActive="active">
      <mat-icon fontIcon="fa-shopping-bag" class="animated swing"></mat-icon>
      <span>商品数据</span>
    </a>

    <div class="footer-nav" fxShow.xs="true" fxHide="true">
      <div
        fxFlex
        fxLayoutAlign="center center"
        fxLayout="row"
        class="navBarBox-icon"
        *ngIf="userLogin"
      >
        <span class="fontSize-12 left pr5 pl10"
          >{{ '到期' | translate }}
          {{ user.activeVersionInfo.deadLine | dateFormat }}</span
        >
        <!--  -->
        <a
          routerLink="/setting"
          routerLinkActive="active"
          [matTooltip]="'设置' | translate"
        >
          <mat-icon
            fontIcon="fa-cog"
            class="animated swing fontSize-24"
          ></mat-icon>
        </a>
        <a
          href="javascript:;"
          [matTooltip]="'购买' | translate"
          (click)="shopping()"
          *ngIf="user.channel == '1'"
        >
          <mat-icon
            fontIcon="fa-shopping-cart"
            class="animated swing fontSize-24"
          ></mat-icon>
        </a>
        <a
          (click)="logOut()"
          [matTooltip]="'退出' | translate"
          href="javascript:;"
        >
          <mat-icon
            fontIcon="fa-power-off"
            class="animated swing fontSize-24"
          ></mat-icon>
        </a>
      </div>
    </div>
  </mat-sidenav>
  <!-- primary content -->
</mat-sidenav-container>
